import React, { Component } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import Header from "../header/detail-header";
import Banner from "./children/Banner";
import AppScroll from "../app-scroll";
import Loading from "../app-loading/Loading";
import Player from "./children/Play";
import Panel from "./children/Panel";
import Tab from "./children/Tab";
import { FETCH_DETAIL_BY_ID } from "./effect";
import Swiper from "swiper/swiper-bundle";
import "swiper/swiper-bundle.css";
import "./style.scss";
class Detail extends Component {
    bannerRef = React.createRef();
    state = {
        activeIndex: 1,
        play: false,
        showPanel: false,
    };
    render() {
        const {
            bannerData,
            videoInfo,
            retailPrice,
            counterPrice,
            name,
            detailHtml,
            loading,
            isLogin,
        } = this.props;
        const { activeIndex, play, showPanel } = this.state;
        console.log("showPanel:", showPanel);
        //是否需要显示视频
        const videoUrl =
            videoInfo &&
            (videoInfo.get("webmVideoUrl") || videoInfo.get("mp4VideoUrl"));
        return (
            <div className="page" id="detail-root">
                <Header />
                <span
                    className="iconfont icon-zuojiantou"
                    onClick={this.returnHandel}
                ></span>
                <div className="content">
                    {loading && <Loading />}
                    <AppScroll className="detail-scroll">
                        {play && (
                            <Player
                                url={videoUrl}
                                onClose={this.handlePlay.bind(this, false)}
                            />
                        )}
                        <Banner
                            data={bannerData}
                            ref={this.bannerRef}
                            index={activeIndex}
                            showPlayIcon={videoUrl}
                            onPlay={this.handlePlay.bind(this, true)}
                        />
                        <div className="accountPrice">
                            <h3>到手价</h3>
                            <p className="retailCounterPrice">
                                <span>￥{retailPrice}</span>
                                <span>￥{counterPrice}</span>
                            </p>
                        </div>
                        <h3 className="title">{name}</h3>
                        <div className="main"></div>
                        <div
                            className="content"
                            dangerouslySetInnerHTML={{ __html: detailHtml }}
                        ></div>
                    </AppScroll>
                </div>
                <div className="tab-wrap">
                    <Tab
                        onBuy={this.togglePanelAction}
                        onAddCart={this.togglePanelAction}
                    />
                    {isLogin || (
                        <div
                            className="login-cover"
                            onClick={this.handleLogin}
                        ></div>
                    )}
                </div>
                {showPanel && <Panel onClose={this.togglePanelAction}/>}
            </div>
        );
    }
    returnHandel = () => {
        this.props.history.goBack(-1);
    };
    handleLogin=()=>{
        this.props.history.push({pathname:'/login',state:{hideAppTab: true}})
    }
    togglePanelAction = () => {
        console.log(111);
        this.setState({ showPanel: !this.state.showPanel });
    };
    // 处理播放的事件
    handlePlay = (value) => {
        this.setState({ play: value });
    };
    componentDidMount() {
        // 跳转成功后获取不到传过来的参数
        const id = this.props.match.params.id;
        // console.log(this.props);
        // const id = this.props.location.state.id;
        // console.log(id);
        // 请求数据
        this.props.requestDetailData(id);
    }
    componentDidUpdate(oldProps, oldState) {
        if (oldProps.bannerData !== this.props.bannerData) {
            //轮播图变化了
            new Swiper(this.bannerRef.current, {
                loop: true,
                on: {
                    slideChange: (swiper) => {
                        this.setState({ activeIndex: swiper.realIndex + 1 });
                    },
                },
            });
        }
    }
}
export default connect(
    (state) => ({
        bannerData: state.getIn(["detail", "data", "bannerData"]),
        videoInfo: state.getIn(["detail", "data", "videoInfo"]),
        name: state.getIn(["detail", "data", "name"]),
        detailHtml: state.getIn(["detail", "data", "detailHtml"]),
        counterPrice: state.getIn(["detail", "data", "counterPrice"]),
        retailPrice: state.getIn(["detail", "data", "retailPrice"]),
        loading: state.getIn(["detail", "loading"]),
        isLogin: state.getIn(["login", "loginStatus"]) === 2,
    }),
    (dispatch) => ({
        requestDetailData(id) {
            dispatch({ type: FETCH_DETAIL_BY_ID, id });
        },
    })
)(Detail);
